
import React from 'react';
import { Upload, Button, message, Table } from 'antd';
import { UploadOutlined } from '@ant-design/icons';
import { read, utils, writeFileXLSX } from 'xlsx'


/**
 * Excel 导入：将表格转换成json 数据ㄹ ；npm i xlsx
 * Excel 导出：将json数据转换成表格 ；
 *
 * npm : https://www.npmjs.com/package/xlsx
 */

const tableColumns = [
    {
        title: "订单编号",
        dataIndex: "OrderNum",
        key: "OrderNum",
    },
    {
        title: "客户名称",
        dataIndex: "OrderCustmerName",
        key: "OrderCustmerName",
    },
    {
        title: "订单总金额",
        dataIndex: "OrderPrice",
        key: "OrderPrice",
    },
    {
        title: "商品数量",
        dataIndex: "OrderCount",
        key: "OrderCount",
    },
    {
        title: "付款状态",
        dataIndex: "OrderPayState",
        key: "OrderPayState",
    },
    {
        title: "发货状态",
        dataIndex: "OrderDeliverState",
        key: "OrderDeliverState",
    },
    {
        title: "创建时间",
        dataIndex: "OrderCreateTime",
        key: "OrderCreateTime",
    },
]

const alldata = [
    {
        key: '1',
        OrderNum: '1',
        OrderCustmerName: '担担面埃及出口公司',
        OrderPrice: '10000',
        OrderCount: '100',
        OrderPayState: '已付款',
        OrderDeliverState: '已完成',
        OrderCreateTime: 'Tue Nov 15 2022 00:01:01 GMT+0800 (中国标准时间)',
    }
]

class onImportBasicExcel extends React.Component {
    // 获取数据 this.props

    state = {
        fileList: [],
        uploading: false,
        dataSource: [...alldata],
        columns: []
    };

    handleUpload = () => {
        const { fileList } = state;
        setState({
            uploading: true,
        });

        let reader = new FileReader();
        reader.readAsArrayBuffer(fileList[0]);

        reader.onload = (e) => {
            let workbook = read(e.target.result);
            let sheet = workbook.Sheets[workbook.SheetNames[0]];
            let arr = utils.sheet_to_json(sheet, { defval: '' });
            let newArr = arr.map(item => {
                delete item.__EMPTY
                return item
            })

            setTimeout(() => {
                message.success('导入成功！');
                console.log(newArr);
                setState({
                    uploading: false,
                    fileList: [],
                    dataSource: [...newArr.map((item, index) => ({ ...item, key: index }))],
                });
            }, 5000);
        };
    };


    render() {
        const { uploading, fileList, dataSource } = state;
        const props = {
            onRemove: file => {
                setState(state => {
                    const index = state.fileList.indexOf(file);
                    const newFileList = state.fileList.slice();
                    newFileList.splice(index, 1);
                    return {
                        fileList: newFileList,
                    };
                });
                // console.log(this.alldata)
            },
            beforeUpload: file => {
                let arr = file.name.split('.');
                if (arr[arr.length - 1] === 'xlsx') {
                    setState({
                        fileList: [file],
                    });
                } else {
                    message.warn("请选择正确的文件");
                }
                return false;
            },
            fileList,
            maxCount: 1,
        };

        return (
            <>
                <Upload {...props} disabled={uploading}>
                    <Button size='small' type='primary' icon={<UploadOutlined />} disabled={uploading} >导入</Button>
                </Upload>

                <Button
                    type="primary"
                    size='small'
                    onClick={handleUpload}
                    disabled={fileList.length === 0}
                    loading={uploading}
                    style={{ marginTop: 16 }}
                >
                    {uploading ? '正在导入...' : '开始导入'}
                </Button>

                <Table
                    dataSource={dataSource}
                    columns={tableColumns}
                    pagination={false}
                />
            </>
        );
    }
}

export default onImportBasicExcel;
